<template>
<span :class="[$style.container]" v-html="html">

</span>
</template>

<script lang="ts">

import { Vue, Component, Provide, Watch, Ref, Prop } from 'vue-property-decorator'

@Component
export default class HighlightText extends Vue {
  @Prop(String) text!: string

  @Prop(String) keyword!: string

  @Prop({ type: Boolean, default: true }) multiple!: boolean

  get html () {
    if (!this.keyword) return this.text
    return (this.text || '').replace(this.keyword, (_, c) => `<code>${_}</code>`)
  }
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

.container {

  code {
    background-color: $color-warning;
  }
}
</style>
